<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-07 14:25:20
 * @LastEditTime : 2021-09-07 14:49:18
 * @FilePath     : /newhope/src/components/amountOfMoney/index.vue
 * @Description  : 
-->
<script setup lang='ts'>
import { withDefaults } from 'vue'
const props = withDefaults(defineProps<{ code: number | string }>(), {})
</script>

<template>
	<div class="amountOfMoney">
		<div class="amount">
			<div class="s">
				<span class="title">太幸运了</span>
				<span class="title">恭喜您获得</span>
				<span class="titleB">澳特兰牛奶佳节现金红包</span>
				<span class="titleB">{{ props.code }}元</span>
			</div>
			<img src="../../assets/images/bkg/getReadme.png" class="get" />
		</div>
	</div>
</template>

<style lang='scss' scoped>
.amountOfMoney {
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: 317px;
	height: 562px;
	background: url("../../assets/images/bkg/get.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 103;
	.amount {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: {
			top: 30px;
		}
		.get {
			height: 70%;
			// width: 100%;
			object-fit: cover;
		}
		.s {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.title {
			text-align: center;
			font-weight: 450;
			letter-spacing: 1px;
			color: #bd010c;
		}
		.titleB {
			text-align: center;
			font-weight: bold;
			letter-spacing: 1px;
			color: #bd010c;
		}
	}
}
</style>